/**
 * =====================================================
 * SYSTÈME DE CONFIRMATION DE SAUVEGARDE
 * =====================================================
 * 
 * Styles pour le conteneur de confirmation qui s'affiche
 * après la sauvegarde d'un objet (barème, tracé, etc.)
 */

/* Conteneur principal - occupe l'espace du header */
.save-confirmation-container {
    position: fixed;
    top: var(--gbl-header-height); /* Juste en dessous du header */
    left: 0;
    right: 0;
    height: var(--sgbl-header-height);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* État initial : vert avec texte blanc */
    background-color: rgb(46, 204, 113);
    
    /* Caché par défaut */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    
    /* Transition progressive pour le changement de fond et couleur */
    transition: background-color 1.4s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* Message de confirmation */
.save-confirmation-message {
    font-size: var(--ht-texte-10);
    font-weight: var(--wg-texte-regular);
    text-align: center;
    color: var(--cl-transparent-blanc-i1);
    /* Transition progressive pour la couleur du texte */
    transition: color 1.6s ease, filter 0.3s ease;
}

/* Nom de l'objet sauvegardé - mis en valeur */
.save-confirmation-message .object-name {
    font-weight: var(--wg-texte-bold);
    font-size: var(--ht-texte-10);
    color: var(--cl-blanc-i1);
}

/* =====================================================
   ÉTATS D'ANIMATION
   ===================================================== */

/* État visible - Phase 1 : Vert avec texte blanc */
.save-confirmation-container.visible {
    opacity: 1;
    visibility: visible;
}

/* Phase 2 : Transition progressive vers blanc avec texte noir */
.save-confirmation-container.phase-white {
    background-color: var(--cl-blanc-i1);
}

.save-confirmation-container.phase-white .save-confirmation-message,
.save-confirmation-container.phase-white .save-confirmation-message .object-name {
    color: var(--cl-noir-i2);
}

/* Phase 3 : Disparition avec blur du texte */
.save-confirmation-container.phase-fadeout {
    opacity: 0;
}

.save-confirmation-container.phase-fadeout .save-confirmation-message {
    filter: blur(4px);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 600px) {
    .save-confirmation-container {
        padding: 10px 15px;
    }
    
    .save-confirmation-message {
        font-size: var(--ht-texte-10);
    }
}